<script setup lang="ts">
  import {ref, inject} from "vue";
  import type {ITodoListService} from '@/Types/ITodoListService'
  const todoListService = inject<ITodoListService>('todoListService')!

// 先声明事件，他接受了一个数组,什么时候触发呢？就是在click那里

  let taskContent = ref("");//赋初值的时候，是通过ref进行封装(响应式数据类型
  function onOk(){
    todoListService.addNewTask(taskContent.value);
    taskContent.value ="";

  }
  //目的是收集用户信息，然后将数据发送到app.vue这个副组件中
</script>

<template>
  <div class="flex w-20em gap-x-2 " >
    <el-input type ="text" v-model="taskContent" />
    <el-button type="primary" @click = "onOk()"><i class="i-ion-add-circle-outline"></i>添加</el-button>
  </div>
</template>

<style scoped>

</style>